<template>
  <div id="content" :style="{height:contentHeight+'px'}">
    <Card>
      <Button class="filter-item" @click="newProject" type="primary" style="width: 100px;">项目新建</Button>
    </Card>
    <Divider/>
    <Table id="card-list-info-table" class="table" stripe
           border
           show-header
           highlight-row
           :loading="isLoading"
           :columns="tableColumns"
           :data="dataList">
    </Table>
    <Modal v-model="isMessageModalShow" width="560" :title="modalTitle">
      <Form ref="projectFormRule" :rules="ruleValidate" :model="projectForm">
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">项目名称</span>
          <FormItem prop="projectName">
            <Input placeholder="项目名称" v-model="projectForm.projectName"/>
          </FormItem>
        </label>
        <div class="r-n-fs-c item-input" v-if="modalTitle !== operatorType[0]">
          <span class="item-input-span">客户端Logo</span>
          <div class="r-n-fs-c" style="width: 100%;padding-left: 3px">
            <img v-if="projectForm.clientLogo !== null" :src="projectForm.clientLogo" alt="客户端Logo"
                 style="height: 40px;">
            <Upload
                class="filter-item"
                style="display: inline-block;"
                paste
                name="file"
                :data=fileUploadParam
                :headers="headers"
                accept="['image/jpg','image/jpeg','image/png']"
                :format="['jpg','jpeg','png']"
                :show-upload-list="false"
                :before-upload="imageUploadBefore"
                :on-success="imageUploadSuccess"
                :on-format-error="imageUploadFormatError"
                :on-error="imageUploadError"
                :action="host+url.file_upload">
              <Button :style="{width:'42px',padding: 0,marginLeft: projectForm.clientLogo === null ? '':'10px'}">
                <div style="width: 42px;height:32px;line-height: 32px;font-size:20px!important;text-align:center;"
                     class="iconfont icon-wenjianshangchuan"></div>
              </Button>
            </Upload>
          </div>
        </div>
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">客户端名称</span>
          <FormItem prop="clientName">
            <Input placeholder="客户端名称" v-model="projectForm.clientName"/>
          </FormItem>
        </label>
        <div class="r-n-fs-c item-input">
          <label class="item-input-span">客户端模块</label>
          <CheckboxGroup style="margin-left: 0;width: 100%" v-model="moduleSelectList">
            <Checkbox label="0">态势监控</Checkbox>
            <Checkbox label="1">飞行统计</Checkbox>
            <Checkbox label="2">险情管理</Checkbox>
            <Checkbox label="3">信息管理</Checkbox>
            <Checkbox label="4">倾斜摄影</Checkbox>
          </CheckboxGroup>
        </div>
      </Form>
      <div slot="footer">
        <Button type="text" @click="isMessageModalShow=false">取消</Button>
        <Button type="primary" @click="modalOk('projectForm')">确定</Button>
      </div>
    </Modal>
    <Modal v-model="isCpAccessModalShow" :title="modalTitle">
      <Form ref="projectCpaOperateFormRule" :rules="ruleValidate2" :model="projectCpaOperateForm"
            style="margin-left: 0;width: 100%;">
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">访问Key</span>
          <FormItem prop="cpAccessKey">
            <Input placeholder="cpAccessKey" v-model="projectCpaOperateForm.cpAccessKey"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">访问密钥</span>
          <FormItem prop="cpAccessSecret">
            <Input placeholder="cpAccessSecret" v-model="projectCpaOperateForm.cpAccessSecret"/>
          </FormItem>
        </label>
      </Form>
      <div slot="footer">
        <Button type="text" @click="isCpAccessModalShow=false">取消</Button>
        <Button type="warning" @click="cpAccessValidate()">可用性校验</Button>
        <Button type="primary" @click="modalOk()">确定</Button>
      </div>
    </Modal>
    <Modal v-model="isYkAccessModalShow" :title="modalTitle">
      <Form ref="projectYkaOperateFormRule" :rules="ruleValidate3" :model="projectYkaOperateForm"
            style="margin-left: 0;width: 100%;">
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">访问Key</span>
          <FormItem prop="ykAccessKey">
            <Input placeholder="ykAccessKey" v-model="projectYkaOperateForm.ykAccessKey"/>
          </FormItem>
        </label>
        <label class="r-n-fs-c item-input">
          <span class="item-input-span">访问密钥</span>
          <FormItem prop="ykAccessSecret">
            <Input placeholder="ykAccessSecret" v-model="projectYkaOperateForm.ykAccessSecret"/>
          </FormItem>
        </label>
      </Form>
      <div slot="footer">
        <Button type="text" @click="isYkAccessModalShow=false">取消</Button>
        <Button type="warning" @click="ykAccessValidate()">可用性校验</Button>
        <Button type="primary" @click="modalOk()">确定</Button>
      </div>
    </Modal>
    <Modal v-model="isTypeUseSelectModalShow" width="800" :title="modalTitle + modalTitleData">
      <Form ref="projectForm" :rules="ruleValidate" :model="projectForm" style="margin-left: 0;width: 100%;">
        <div class="r-n-fs-c item-input">
          <label class="item-input-span" style="width: 110px">险情类型选择</label>
          <CheckboxGroup style="margin-left: 0;width: 100%" v-model="dangerTypeSelectList">
            <Checkbox v-for="item in dangerTypeList" :key="item.id+'-'+item.typeName" :label="item.id">{{
                item.typeName
              }}
            </Checkbox>
          </CheckboxGroup>
        </div>
        <div class="r-n-fs-c item-input">
          <label class="item-input-span" style="width: 110px">基础设施使用</label>
          <CheckboxGroup style="margin-left: 0;width: 100%" v-model="iTypeSelectList">
            <Checkbox :label=1>桩牌</Checkbox>
            <Checkbox :label=2>通用设施</Checkbox>
            <Checkbox :label=3>高后果区</Checkbox>
            <Checkbox :label=4>施工作业区</Checkbox>
            <Checkbox :label=5>监控</Checkbox>
          </CheckboxGroup>
        </div>
        <div class="r-n-fs-c item-input" v-if="typeSelectForm.infrastructureTypeUse !== null && typeSelectForm.infrastructureTypeUse.includes(1)">
          <label class="item-input-span" style="width: 110px">桩牌类型使用</label>
          <CheckboxGroup style="margin-left: 0;width: 100%" v-model="pcTypeSelectList">
            <Checkbox v-for="item in pcTypeList" :key="item.id+'-'+item.name" :label="item.id">{{
                item.name
              }}
            </Checkbox>
          </CheckboxGroup>
        </div>
        <div class="r-n-fs-c item-input" v-if="typeSelectForm.infrastructureTypeUse !== null && typeSelectForm.infrastructureTypeUse.includes(2)">
          <label class="item-input-span" style="width: 110px">通用设施类型使用</label>
          <CheckboxGroup style="margin-left: 0;width: 100%" v-model="gfTypeSelectList">
            <Checkbox v-for="item in gfTypeList" :key="item.id+'-'+item.name" :label="item.id">{{
                item.name
              }}
            </Checkbox>
          </CheckboxGroup>
        </div>
        <div class="r-n-fs-c item-input" v-if="typeSelectForm.infrastructureTypeUse !== null && typeSelectForm.infrastructureTypeUse.includes(3)">
          <label class="item-input-span" style="width: 110px">高后果区类型使用</label>
          <CheckboxGroup style="margin-left: 0;width: 100%" v-model="hcaTypeSelectList">
            <Checkbox v-for="item in hcaTypeList" :key="item.id+'-'+item.name" :label="item.id">{{
                item.name
              }}
            </Checkbox>
          </CheckboxGroup>
        </div>
        <div class="r-n-fs-c item-input" v-if="typeSelectForm.infrastructureTypeUse !== null && typeSelectForm.infrastructureTypeUse.includes(4)">
          <label class="item-input-span" style="width: 110px">施工作业类型使用</label>
          <CheckboxGroup style="margin-left: 0;width: 100%" v-model="cuTypeSelectList">
            <Checkbox v-for="item in cuTypeList" :key="item.id+'-'+item.name" :label="item.id">{{
                item.name
              }}
            </Checkbox>
          </CheckboxGroup>
        </div>
        <div class="r-n-fs-c item-input" v-if="typeSelectForm.infrastructureTypeUse !== null && typeSelectForm.infrastructureTypeUse.includes(5)">
          <label class="item-input-span" style="width: 110px">监控摄像头类型使用</label>
          <CheckboxGroup style="margin-left: 0;width: 100%" v-model="cameraTypeSelectList">
            <Checkbox v-for="item in cameraTypeList" :key="item.id+'-'+item.name" :label="item.id">{{
                item.name
              }}
            </Checkbox>
          </CheckboxGroup>
        </div>
      </Form>
      <div slot="footer">
        <Button type="text" @click="isTypeUseSelectModalShow=false">取消</Button>
        <Button type="primary" @click="modalOk('projectForm')">确定</Button>
      </div>
    </Modal>
    <Modal v-model="modalTip" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>操作确认</span>
      </p>
      <div style="text-align:center">
        <p>{{ modalTipContent }}</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="modalLoading" @click="modalTipOk">确认操作</Button>
      </div>
    </Modal>
    <Modal v-model="isCpBoxModalShow" width="1000"  footer-hide :title="modalTitle">
      <div style="width: 100%;max-height: 500px;overflow: auto">
        <Table class="table" stripe
               border
               show-header
               highlight-row
               :loading="isLoading"
               :columns="cpBoxColumns"
               :data="cpBoxList">
        </Table>
      </div>
    </Modal>
  </div>
</template>

<script>

import {mapGetters, mapState} from "vuex"
import axios from "axios";
import {Request} from "@/global/config";

export default {
  name: "Project",
  computed: {
    ...mapState(["url", "host", "resourceHost", "realSideWidth","projectList"]),
    ...mapGetters(["contentWidth", "contentHeight"]),
  },
  data() {
    return {
      //模块列表
      moduleSelectList: [],
      //险情类型选择列表
      dangerTypeSelectList: [],
      //基础设施选择列表
      iTypeSelectList: [],
      //桩牌选择列表
      pcTypeSelectList: [],
      gfTypeSelectList: [],
      hcaTypeSelectList: [],
      cuTypeSelectList: [],
      cameraTypeSelectList: [],
      isCpBoxModalShow: false,
      isLoading: false,
      modalTip: false,
      modalTipContent: null,
      modalLoading: false,
      isMessageModalShow: false,
      isCpAccessModalShow: false,
      isYkAccessModalShow: false,
      isTypeUseSelectModalShow: false,
      modalTitle: '云平台接入',
      modalTitleData: null,
      operatorType: ['项目新建', '项目编辑', '云平台接入', '云平台开启', '云平台关闭', '御空接入', '御空开启', '御空关闭', '基础设施选择'],
      fileUploadParam: {
        category: 11,
        projectId: null
      },
      headers: {
        'u-projectId': null,
        'u-uid': null,
        'u-token': null,
      },
      projectCpaOperateForm: {
        projectId: null,
        cpAccessKey: null,
        cpAccessSecret: null
      },
      projectYkaOperateForm: {
        projectId: null,
        ykAccessKey: null,
        ykAccessSecret: null
      },
      projectForm: {
        id: null,
        clientLogo: null,
        newClientLogo: null,
        projectName: null,
        clientName: null,
        clientModule: null
      },
      typeSelectForm: {
        id: null,
        infrastructureTypeUse: null,
        dangerTypeUse: null,
        pileCardTypeUse: null,
        constructionTypeUse: null,
        highConsequenceAreaTypeUse: null,
        generalFacilitiesTypeUse: null,
        cameraTypeUse: null
      },
      ruleValidate: {
        projectName: [
          {required: true, type: 'string', message: '项目名称不能为空', trigger: 'change'},
          {required: true, type: 'string', min: 2, message: '项目名称不能少于2个字符', trigger: 'change'},
          {required: true, type: 'string', max: 20, message: '项目名称不能超过20个字符', trigger: 'change'}
        ],
        clientName: [
          {type: 'string', min: 2, message: '客户端名称不能少于2个字符', trigger: 'change'},
          {type: 'string', max: 20, message: '客户端名称不能超过20个字符', trigger: 'change'}
        ]
      },
      ruleValidate2: {
        cpAccessKey: [
          {required: true, type: 'string', message: 'cpAccessKey不能为空', trigger: 'change'},
          {required: true, type: 'string', min: 20, max: 20, message: 'cpAccessKey为长度为20的字符串', trigger: 'change'},
        ],
        cpAccessSecret: [
          {required: true, type: 'string', message: 'cpAccessSecret不能为空', trigger: 'change'},
          {required: true, type: 'string', min: 32, max: 32, message: 'cpAccessSecret为长度为32的字符串', trigger: 'change'},
        ]
      },
      ruleValidate3: {
        ykAccessKey: [
          {required: true, type: 'string', message: 'ykAccessKey不能为空', trigger: 'change'},
          {required: true, type: 'string', min: 24, max: 24, message: 'ykAccessKey为长度为24的字符串', trigger: 'change'},
        ],
        ykAccessSecret: [
          {required: true, type: 'string', message: 'ykAccessSecret不能为空', trigger: 'change'},
          {required: true, type: 'string', min: 30, max: 30, message: 'ykAccessSecret为长度为30的字符串', trigger: 'change'},
        ]
      },
      tableColumns: [
        {
          title: '项目ID',
          key: 'id',
          width: 100,
          minWidth: 100,
          resizable: true,
          align: "center",
        },
        {
          title: '客户端Logo',
          key: 'clientLogo',
          resizable: true,
          width: 140,
          minWidth: 100,
          align: "center",
          render: this.imageRender
        },
        {
          title: '项目名称',
          key: 'projectName',
          fixed: 'left',
          resizable: true,
          width: 240,
          minWidth: 100,
          tooltip: true,
          align: "center"
        },
        {
          title: '客户端名称',
          key: 'clientName',
          resizable: true,
          width: 300,
          align: "center"
        },
        {
          title: '项目配置',
          fixed: 'right',
          resizable: true,
          width: 560,
          align: "center",
          render: this.operatorRenderFunction
        },
        {
          title: '云平台接入状态',
          key: 'cpAccessAvailable',
          resizable: true,
          width: 160,
          align: "center",
          render: this.cpAccessAvailableRender
        },
        {
          title: '御空接入状态',
          key: 'ykAccessAvailable',
          resizable: true,
          width: 150,
          align: "center",
          render: this.ykAccessAvailableRender
        },
        {
          title: '客户端模块',
          resizable: true,
          width: 360,
          align: "center",
          render: function (createElement, data) {
            let {clientModule} = data.row;
            if (clientModule === null) {
              return createElement("span", {
                style: {
                  color: '#FF6666'
                }
              }, '未选择');
            }
            let clientModuleSelect = "";
            let moduleArray = JSON.parse(clientModule);
            if (moduleArray[0] === 1){
              clientModuleSelect += "态势监控 "
            }
            if (moduleArray[1] === 1){
              clientModuleSelect += "飞行统计 "
            }
            if (moduleArray[2] === 1){
              clientModuleSelect += "险情管理 "
            }
            if (moduleArray[3] === 1){
              clientModuleSelect += "信息管理 "
            }
            if (moduleArray[4] === 1){
              clientModuleSelect += "倾斜摄影 "
            }
            return createElement("span", clientModuleSelect);
          }
        },
        {
          title: '基础设施选择',
          resizable: true,
          width: 300,
          align: "center",
          render: function (createElement, data) {
            let {infrastructureTypeUse} = data.row;
            if (infrastructureTypeUse === null || infrastructureTypeUse === "[]") {
              return createElement("span", {
                style: {
                  color: '#FF6666'
                }
              }, '未选择');
            }
            let infrastructureTypeUseSelect = "";
            let moduleArray = JSON.parse(infrastructureTypeUse);
            if (moduleArray.indexOf(1) !== -1){
              infrastructureTypeUseSelect += "桩牌 "
            }
            if (moduleArray.indexOf(2) !== -1){
              infrastructureTypeUseSelect += "通用设施 "
            }
            if (moduleArray.indexOf(3) !== -1){
              infrastructureTypeUseSelect += "高后果区 "
            }
            if (moduleArray.indexOf(4) !== -1){
              infrastructureTypeUseSelect += "施工作业区 "
            }
            if (moduleArray.indexOf(5) !== -1){
              infrastructureTypeUseSelect += "监控 "
            }
            return createElement("span", infrastructureTypeUseSelect)
          }
        },
        {
          title: '险情类型选择',
          resizable: true,
          width: 300,
          align: "center",
          render: this.renderDangerTypeUse
        },
        {
          title: '施工作业区类型选择',
          resizable: true,
          width: 300,
          align: "center",
          render: this.cuTypeUse
        },
        {
          title: '桩牌类型选择',
          resizable: true,
          width: 620,
          align: "center",
          render: this.pcTypeUse
        },
        {
          title: '高后果区类型选择',
          resizable: true,
          width: 300,
          align: "center",
          render: this.hcaTypeUse
        },
        {
          title: '通用设施类型选择',
          resizable: true,
          width: 300,
          align: "center",
          render: this.gfTypeUse
        },
        {
          title: '监控类型选择',
          resizable: true,
          width: 300,
          align: "center",
          render: this.cameraTypeUse
        }
      ],
      dataList: [],
      dangerTypeList: [],
      pcTypeList: [],
      gfTypeList: [],
      hcaTypeList: [],
      cuTypeList: [],
      cameraTypeList: [],
      cpBoxList: [],
      cpBoxColumns: [
        {
          title: '云盒编号',
          key: 'boxSn',
          minWidth: 180,
          resizable: true,
          align: "center",
        },
        {
          title: '云盒名称',
          key: 'boxName',
          resizable: true,
          minWidth: 120,
          align: "center"
        },
        {
          title: '是否在线',
          key: 'onLine',
          resizable: true,
          minWidth: 100,
          align: "center",
          render:function (createElement,e){
            let {onLine} = e.row;
            if (onLine){
              return createElement('Tooltip',{
                attrs: {
                  content :"在线",
                  placement : "top"
                }
              },[createElement('div',{
                style: {
                  height:'15px',
                  width:'15px',
                  borderRadius:'50%',
                  background: '#1afa29'
                }
              },'')]);
            }else{
              return createElement('Tooltip',{
                attrs: {
                  content :"离线",
                  placement : "top"
                }
              },[createElement('div',{
                style: {
                  height:'15px',
                  width:'15px',
                  borderRadius:'50%',
                  background: '#838383'
                }
              },'')]);
            }
          }
        },
        {
          title: '任务ID',
          key: 'taskId',
          resizable: true,
          minWidth: 100,
          align: "center"
        },
        {
          title: '软件版本',
          key: 'boxVersion',
          resizable: true,
          minWidth: 100,
          align: "center"
        },
        {
          title: '视频流IP',
          key: 'videoServer',
          resizable: true,
          minWidth: 120,
          align: "center"
        },
        {
          title: '视频流PORT',
          key: 'videoPort',
          resizable: true,
          minWidth: 100,
          align: "center"
        }
      ],
      dangerTypeMap: new Map(),
      pcTypeMap: new Map(),
      gfTypeMap: new Map(),
      hcaTypeMap: new Map(),
      cuTypeMap: new Map(),
      cameraTypeMap: new Map()
    }
  },
  watch: {
    moduleSelectList: function (e) {
      let module = [0, 0, 0, 0, 0];
      for (let i = 0; i < 5; i++) {
        if (e.indexOf(i.toString()) !== -1) {
          module[i] = 1;
        }
      }
      this.projectForm.clientModule = JSON.stringify(module);
    },
    dangerTypeSelectList: function (e) {
      this.typeSelectForm.dangerTypeUse = JSON.stringify(e);
    },
    iTypeSelectList: function (e) {
      this.typeSelectForm.infrastructureTypeUse = JSON.stringify(e);
    },
    pcTypeSelectList: function (e) {
      this.typeSelectForm.pileCardTypeUse = JSON.stringify(e);
    },
    gfTypeSelectList: function (e) {
      this.typeSelectForm.generalFacilitiesTypeUse = JSON.stringify(e);
    },
    hcaTypeSelectList: function (e) {
      this.typeSelectForm.highConsequenceAreaTypeUse = JSON.stringify(e);
    },
    cuTypeSelectList: function (e) {
      this.typeSelectForm.constructionTypeUse = JSON.stringify(e);
    },
    cameraTypeSelectList: function (e) {
      this.typeSelectForm.cameraTypeUse = JSON.stringify(e);
    },
  },
  mounted: function () {
    let self = this;
    this.headers['u-projectId'] = localStorage.getItem('u-projectId');
    this.headers['u-uid'] = localStorage.getItem('u-uid');
    this.headers['u-token'] = localStorage.getItem('u-token');
    axios.all([self.selectDangerTypeList(),
      self.selectPileCardTypeList(),
      self.selectGeneralFacilitiesTypeList(),
      self.selectHighConsequenceAreaTypeList(),
      self.selectConstructionTypeTypeList(),
      self.selectCameraTypeTypeList()
    ]).then(self.axios.spread( (dangerTypeRsp,pileCardTypeRsp,generalFacilitiesTypeRsp,
                                highConsequenceAreaTypeRsp,constructionTypeTypeRsp,cameraTypeTypeRsp) => {
      if (dangerTypeRsp.data.state === 200){
        let {records} = dangerTypeRsp.data.content;
        self.dangerTypeList = records;
        for (let dangerType of self.dangerTypeList) {
          self.dangerTypeMap.set(dangerType['id'],dangerType['typeName']);
        }
        let obj = {};
        for (let[k,v] of self.dangerTypeMap) {
          obj[k] = v;
        }
        localStorage.setItem("dangerTypeMap",JSON.stringify(obj));
      }
      if (pileCardTypeRsp.data.state === 200){
        let {records} = pileCardTypeRsp.data.content;
        self.pcTypeList = records;
        for (let pcType of self.pcTypeList) {
          self.pcTypeMap.set(pcType['id'],pcType['name']);
        }
        let obj = {};
        for (let[k,v] of self.pcTypeMap) {
          obj[k] = v;
        }
        localStorage.setItem("pcTypeMap",JSON.stringify(obj));
      }
      if (generalFacilitiesTypeRsp.data.state === 200){
        let {records} = generalFacilitiesTypeRsp.data.content;
        self.gfTypeList = records;
        for (let gfType of self.gfTypeList) {
          self.gfTypeMap.set(gfType['id'],gfType['name']);
        }
        let obj = {};
        for (let[k,v] of self.gfTypeMap) {
          obj[k] = v;
        }
        localStorage.setItem("gfTypeMap",JSON.stringify(obj));
      }
      if (highConsequenceAreaTypeRsp.data.state === 200){
        let {records} = highConsequenceAreaTypeRsp.data.content;
        self.hcaTypeList = records;
        for (let hcaType of self.hcaTypeList) {
          self.hcaTypeMap.set(hcaType['id'],hcaType['name']);
        }
        let obj = {};
        for (let[k,v] of self.hcaTypeMap) {
          obj[k] = v;
        }
        localStorage.setItem("hcaTypeMap",JSON.stringify(obj))
      }
      if (constructionTypeTypeRsp.data.state === 200){
        let {records} = constructionTypeTypeRsp.data.content;
        self.cuTypeList = records;
        for (let cuType of self.cuTypeList) {
          self.cuTypeMap.set(cuType['id'],cuType['name']);
        }
        let obj = {};
        for (let[k,v] of self.cuTypeMap) {
          obj[k] = v;
        }
        localStorage.setItem("cuTypeMap",JSON.stringify(obj))
      }
      if (cameraTypeTypeRsp.data.state === 200){
        let {records} = cameraTypeTypeRsp.data.content;
        self.cameraTypeList = records;
        for (let cameraType of self.cameraTypeList) {
          self.cameraTypeMap.set(cameraType['id'],cameraType['name']);
        }
        let obj = {};
        for (let[k,v] of self.cameraTypeMap) {
          obj[k] = v;
        }
        localStorage.setItem("cameraTypeMap",JSON.stringify(obj));
      }
      this.dataList = this.projectList;
    }));
  },
  methods: {
    renderDangerTypeUse (createElement, data) {
      let {dangerTypeUse} = data.row,self = this;
      if (dangerTypeUse === null || dangerTypeUse === '[]') {
        return createElement("span", {
          style: {
            color: '#FF6666'
          }
        }, '未选择');
      }
      let typeUseSelect = "";
      let moduleArray = JSON.parse(dangerTypeUse);
      for (let type of moduleArray) {
        let name = self.dangerTypeMap.get(type);
        if (name !== undefined){
          typeUseSelect += name + " ";
        }else {
          typeUseSelect += JSON.parse(localStorage.getItem("dangerTypeMap"))[type] + " ";
        }
      }
      return createElement("span", typeUseSelect)
    },
    pcTypeUse (createElement, data) {
      let {pileCardTypeUse} = data.row,self = this;
      if (pileCardTypeUse === null || pileCardTypeUse === '[]') {
        return createElement("span", {
          style: {
            color: '#FF6666'
          }
        }, '未选择');
      }
      let typeUseSelect = "";
      let moduleArray = JSON.parse(pileCardTypeUse);
      for (let type of moduleArray) {
        let name = self.pcTypeMap.get(type);
        if (name !== undefined){
          typeUseSelect += name + " ";
        }else {
          typeUseSelect += JSON.parse(localStorage.getItem("pcTypeMap"))[type] + " ";
        }
      }
      return createElement("span", typeUseSelect)
    },
    gfTypeUse (createElement, data) {
      let {generalFacilitiesTypeUse} = data.row,self = this;
      if (generalFacilitiesTypeUse === null || generalFacilitiesTypeUse === '[]') {
        return createElement("span", {
          style: {
            color: '#FF6666'
          }
        }, '未选择');
      }
      let typeUseSelect = "";
      let moduleArray = JSON.parse(generalFacilitiesTypeUse);
      for (let type of moduleArray) {
        let name = self.gfTypeMap.get(type);
        if (name !== undefined){
          typeUseSelect += name + " ";
        }else {
          typeUseSelect += JSON.parse(localStorage.getItem("gfTypeMap"))[type] + " ";
        }
      }
      return createElement("span", typeUseSelect)
    },
    hcaTypeUse (createElement, data) {
      let {highConsequenceAreaTypeUse} = data.row,self = this;
      if (highConsequenceAreaTypeUse === null || highConsequenceAreaTypeUse === '[]') {
        return createElement("span", {
          style: {
            color: '#FF6666'
          }
        }, '未选择');
      }
      let typeUseSelect = "";
      let moduleArray = JSON.parse(highConsequenceAreaTypeUse);
      for (let type of moduleArray) {
        let name = self.hcaTypeMap.get(type);
        if (name !== undefined){
          typeUseSelect += name + " ";
        }else {
          typeUseSelect += JSON.parse(localStorage.getItem("hcaTypeMap"))[type] + " ";
        }
      }
      return createElement("span", typeUseSelect)
    },
    cuTypeUse (createElement, data) {
      let {constructionTypeUse} = data.row,self = this;
      if (constructionTypeUse === null || constructionTypeUse === '[]') {
        return createElement("span", {
          style: {
            color: '#FF6666'
          }
        }, '未选择');
      }
      let typeUseSelect = "";
      let moduleArray = JSON.parse(constructionTypeUse);
      for (let type of moduleArray) {
        let name = self.cuTypeMap.get(type);
        if (name !== undefined){
          typeUseSelect += name + " ";
        }else {
          typeUseSelect += JSON.parse(localStorage.getItem("cuTypeMap"))[type] + " ";
        }
      }
      return createElement("span", typeUseSelect)
    },
    cameraTypeUse (createElement, data) {
      let {cameraTypeUse} = data.row,self = this;
      if (cameraTypeUse === null || cameraTypeUse === '[]') {
        return createElement("span", {
          style: {
            color: '#FF6666'
          }
        }, '未选择');
      }
      let typeUseSelect = "";
      let moduleArray = JSON.parse(cameraTypeUse);
      for (let type of moduleArray) {
        let name = self.cameraTypeMap.get(type);
        if (name !== undefined){
          typeUseSelect += name + " ";
        }else {
          typeUseSelect += JSON.parse(localStorage.getItem("cameraTypeMap"))[type] + " ";
        }
      }
      return createElement("span", typeUseSelect)
    },
    modalTipOk() {
      this.modalLoading = true;
      switch (this.modalTitle) {
        case this.operatorType[3]: {
          this.projectCpaOpen(this.projectCpaOperateForm);
        }
          break;
        case this.operatorType[4]: {
          this.projectCpaShutdown(this.projectCpaOperateForm);
        }
          break;
        case this.operatorType[6]: {
          this.projectYkaOpen(this.projectYkaOperateForm);
        }
          break;
        case this.operatorType[7]: {
          this.projectYkaShutdown(this.projectYkaOperateForm);
        }
          break;
      }
    },
    newProject() {
      let self = this;
      self.modalTitle = self.operatorType[0];
      self.moduleSelectList = [];
      this.$refs['projectFormRule'].resetFields();
      this.isMessageModalShow = true;
      this.projectForm = {
        id: null,
        clientLogo: null,
        projectName: null,
        clientName: null,
        clientModule: null
      }
    },
    imageUploadBefore() {
      this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Icon', {
              'class': 'demo-spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 18
              }
            }),
            h('div', 'Loading')
          ])
        }
      });
    },
    imageUploadSuccess(response) {
      this.$Spin.hide();
      if (response.state === 200) {
        let {content} = response;
        this.projectForm.clientLogo = localStorage.getItem("resourceHost") + content;
        this.projectForm.newClientLogo = content;
        this.$Notice.success({
          title: "文件上传",
          desc: "文件上传成功,URL[" + content + "]",
          duration: 10
        })
      } else {
        let {message} = response;
        this.$Notice.error({
          title: "文件上传",
          desc: message,
          duration: 10
        })
      }
    },
    imageUploadFormatError(file) {
      this.$Spin.hide();
      this.$Notice.warning({
        title: '文件格式错误',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 JPG 或JPEG 或 PNG 格式文件！',
        duration: 10
      });
    },
    imageUploadError(error) {
      this.$Spin.hide();
      this.$Notice.error({
        title: "上传失败",
        desc: error,
        duration: 10
      })
    },
    modalOk() {
      switch (this.modalTitle) {
        case this.operatorType[0]: {
          let isValidate = false;
          this.$refs['projectFormRule'].validate((valid) => {
            if (valid) {
              isValidate = true;
            }
          })
          this.isMessageModalShow = !isValidate;
          if (!isValidate) {
            return;
          }
          this.insertProject(this.projectForm)
        }
          break;
        case this.operatorType[1]: {
          let isValidate = false;
          this.$refs['projectFormRule'].validate((valid) => {
            if (valid) {
              isValidate = true;
            }
          })
          this.isMessageModalShow = !isValidate;
          if (!isValidate) {
            return;
          }
          this.updateProject(this.projectForm);
        }
          break;
        case this.operatorType[2]: {
          let isValidate = false;
          this.$refs['projectCpaOperateFormRule'].validate((valid) => {
            if (valid) {
              isValidate = true;
            }
          })
          this.isCpAccessModalShow = !isValidate;
          if (!isValidate) {
            return;
          }
          this.projectCpaAccess(this.projectCpaOperateForm);
        }
          break;
        case this.operatorType[5]: {
          let isValidate = false;
          this.$refs['projectYkaOperateFormRule'].validate((valid) => {
            if (valid) {
              isValidate = true;
            }
          })
          this.isYkAccessModalShow = !isValidate;
          if (!isValidate) {
            return;
          }
          this.projectYkaAccess(this.projectYkaOperateForm);
        }
          break;
        case this.operatorType[8]: {
          this.isTypeUseSelectModalShow = false;
          this.projectInfrastructureTypeSelect(this.typeSelectForm);
        }
          break;
      }
    },
    cpAccessValidate() {
      let isValidate = false;
      this.$refs['projectCpaOperateFormRule'].validate((valid) => {
        if (valid) {
          isValidate = true;
        }
      })
      if (!isValidate) {
        return;
      }
      this.projectCpaAccessValidate(this.projectCpaOperateForm);
    },
    ykAccessValidate() {
      let isValidate = false;
      this.$refs['projectYkaOperateFormRule'].validate((valid) => {
        if (valid) {
          isValidate = true;
        }
      })
      if (!isValidate) {
        return;
      }
      this.projectYkaAccessValidate(this.projectYkaOperateForm);
    },
    imageRender(createElement, data) {
      let {clientLogo} = data.row,self = this;
      if (clientLogo === null){
        return createElement('div','-');
      }
      return createElement('img', {
        style: {
          height: '25px',
          display: 'inline-block',
          cursor: 'zoom-in'
        },
        attrs: {
          title: '点击查看大图',
          src: clientLogo
        },
        on: {
          click: function () {
            self.$store.state.imageWindowUrl = clientLogo;
            self.$store.state.isImageWindowShow = true;
          }
        }
      });
    },
    cpAccessAvailableRender(createElement, data) {
      let {cpAccessAvailable} = data.row;
      if (cpAccessAvailable === 0) {
        return createElement('Tooltip',{
          attrs: {
            content :"open",
            placement : "top"
          }
        },[createElement('div',{
          style: {
            height:'15px',
            width:'15px',
            borderRadius:'50%',
            background: '#1afa29'
          }
        },'')]);
      }
      if (cpAccessAvailable === 1) {
        return createElement('Tooltip',{
          attrs: {
            content :"close",
            placement : "top"
          }
        },[createElement('div',{
          style: {
            height:'15px',
            width:'15px',
            borderRadius:'50%',
            background: '#f74242'
          }
        },'')]);
      }
      if (cpAccessAvailable === 2) {
        return createElement("span", '-');
      }
    },
    ykAccessAvailableRender(createElement, data) {
      let {ykAccessAvailable} = data.row;
      if (ykAccessAvailable === 0) {
        return createElement('Tooltip',{
          attrs: {
            content :"open",
            placement : "top"
          }
        },[createElement('div',{
          style: {
            height:'15px',
            width:'15px',
            borderRadius:'50%',
            background: '#1afa29'
          }
        },'')]);
      }
      if (ykAccessAvailable === 1) {
        return createElement('Tooltip',{
          attrs: {
            content :"close",
            placement : "top"
          }
        },[createElement('div',{
          style: {
            height:'15px',
            width:'15px',
            borderRadius:'50%',
            background: '#f74242'
          }
        },'')]);
      }
      if (ykAccessAvailable === 2) {
        return createElement("span", '-');
      }
    },
    operatorRenderFunction(createElement, data) {
      let self = this;
      let {
        id,
        cpAccessAvailable, cpAccessKey, cpAccessSecret,
        ykAccessAvailable, ykAccessKey, ykAccessSecret,
        clientLogo, projectName, clientName, clientModule,
        infrastructureTypeUse,
        dangerTypeUse,
        pileCardTypeUse,
        constructionTypeUse,
        highConsequenceAreaTypeUse,
        generalFacilitiesTypeUse,cameraTypeUse
      } = data.row;
      let btnList = [];
      btnList.push(createElement('Button', {
        'class': 'button-item',
        style: {
          width: '100px',
          border: '#5CADFF 1px dashed',
          color: '#5cadff'
        },
        attrs: {
          type: "dashed"
        },
        nativeOn: {
          click: function () {
            self.projectForm.id = id;
            self.projectForm.clientLogo = clientLogo;
            self.projectForm.projectName = projectName;
            self.projectForm.clientName = clientName;
            self.projectForm.clientModule = clientModule;
            self.fileUploadParam.projectId = id;
            let module = JSON.parse(clientModule);
            self.moduleSelectList = [];
            for (let i in module) {
              if (module[i] === 1) {
                self.moduleSelectList.push(i);
              }
            }
            self.modalTitle = self.operatorType[1];
            self.isMessageModalShow = true;
          }
        },
      }, "信息更新"));
      btnList.push(createElement('Button', {
        'class': 'button-item',
        style: {
          width: '120px',
          border: '#5CADFF 1px dashed',
          color: '#5cadff'
        },
        attrs: {
          type: "dashed"
        },
        nativeOn: {
          click: function () {
            self.dangerTypeSelectList = JSON.parse(dangerTypeUse);

            self.iTypeSelectList = JSON.parse(infrastructureTypeUse);
            self.pcTypeSelectList = JSON.parse(pileCardTypeUse);
            self.gfTypeSelectList = JSON.parse(generalFacilitiesTypeUse);
            self.hcaTypeSelectList = JSON.parse(highConsequenceAreaTypeUse);
            self.cuTypeSelectList = JSON.parse(constructionTypeUse);
            self.cameraTypeSelectList = JSON.parse(cameraTypeUse);
            self.modalTitle = self.operatorType[8];
            self.modalTitleData = ' - 项目 [ ' + projectName + ' ]';
            self.typeSelectForm.id = id;
            self.isTypeUseSelectModalShow = true;
          }
        },
      }, "类型使用选择"));
      switch (cpAccessAvailable) {
        case 2: {
          btnList.push(createElement('Button', {
            'class': 'button-item',
            style: {
              width: '100px',
              border: '#5CADFF 1px dashed',
              color: '#52c41a'
            },
            attrs: {
              type: "dashed"
            },
            nativeOn: {
              click: function () {
                self.$refs['projectCpaOperateFormRule'].resetFields();
                self.isCpAccessModalShow = true;
                self.projectCpaOperateForm.projectId = id;
                self.projectCpaOperateForm.cpAccessSecret = null;
                self.projectCpaOperateForm.cpAccessSecret = null;
                self.modalTitle = self.operatorType[2];
              }
            },
          }, "云平台接入"));
        }
          break;
        case 1: {
          btnList.push(createElement('Button', {
            'class': 'button-item',
            style: {
              width: '100px',
              border: '#5CADFF 1px dashed',
              color: '#ffa940'
            },
            attrs: {
              type: "dashed"
            },
            nativeOn: {
              click: function () {
                self.modalTip = true;
                self.modalTitle = self.operatorType[3];
                self.modalTipContent = '是否确认开启项目[' + projectName + ']的云平台相关业务? 开启后PC客户端将接收云盒实时遥测等数据';
                self.projectCpaOperateForm.projectId = id;
                self.projectCpaOperateForm.cpAccessKey = cpAccessKey;
                self.projectCpaOperateForm.cpAccessSecret = cpAccessSecret;
              }
            },
          }, "云平台开启"));
        }
          break;
        case 0: {
          btnList.push(createElement('Button', {
            'class': 'button-item',
            style: {
              width: '100px',
              border: '#5CADFF 1px dashed',
              color: '#FF6666'
            },
            attrs: {
              type: "dashed"
            },
            nativeOn: {
              click: function () {
                self.modalTip = true;
                self.modalTitle = self.operatorType[4];
                self.modalTipContent = '是否确认关闭项目[ ' + projectName + ' ]的云平台相关任务? 关闭后PC客户端该项目下所有用户将无法接收云盒实时遥测等数据';
                self.projectCpaOperateForm.projectId = id;
                self.projectCpaOperateForm.cpAccessKey = cpAccessKey;
                self.projectCpaOperateForm.cpAccessSecret = cpAccessSecret;
              }
            },
          }, "云平台关闭"));
        }break;
      }
      let boxListColor = cpAccessAvailable === 0 ? '#5cadff': '#00000030'
      btnList.push(createElement('Button', {
        'class': 'button-item',
        style: {
          width: '100px',
          border: '#5CADFF 1px dashed',
          color: boxListColor
        },
        attrs: {
          type: "dashed",
          disabled: cpAccessAvailable !== 0
        },
        nativeOn: {
          click: function () {
            self.cpBoxListGet(id);
          }
        },
      }, "云盒列表"));
      switch (ykAccessAvailable) {
        case 2: {
          btnList.push(createElement('Button', {
            'class': 'button-item',
            style: {
              width: '100px',
              border: '#5CADFF 1px dashed',
              color: '#52c41a'
            },
            attrs: {
              type: "dashed"
            },
            nativeOn: {
              click: function () {
                self.$refs['projectYkaOperateFormRule'].resetFields();
                self.isYkAccessModalShow = true;
                self.projectYkaOperateForm.projectId = id;
                self.projectYkaOperateForm.ykAccessKey = null;
                self.projectYkaOperateForm.ykAccessSecret = null;
                self.modalTitle = self.operatorType[5];
              }
            },
          }, "御空接入"));
        }
          break;
        case 1: {
          btnList.push(createElement('Button', {
            'class': 'button-item',
            style: {
              width: '100px',
              border: '#5CADFF 1px dashed',
              color: '#ffa940'
            },
            attrs: {
              type: "dashed"
            },
            nativeOn: {
              click: function () {
                self.modalTip = true;
                self.modalTitle = self.operatorType[6];
                self.modalTipContent = '是否确认开启项目[' + projectName + ']的御空相关业务? 开启后PC客户端将接收御空平台实时遥测等数据';
                self.projectYkaOperateForm.projectId = id;
                self.projectYkaOperateForm.ykAccessKey = ykAccessKey;
                self.projectYkaOperateForm.ykAccessSecret = ykAccessSecret;
              }
            },
          }, "御空开启"));
        }
          break;
        case 0: {
          btnList.push(createElement('Button', {
            'class': 'button-item',
            style: {
              width: '100px',
              border: '#5CADFF 1px dashed',
              color: '#FF6666'
            },
            attrs: {
              type: "dashed"
            },
            nativeOn: {
              click: function () {
                self.modalTip = true;
                self.modalTitle = self.operatorType[7];
                self.modalTipContent = '是否确认关闭项目[ ' + projectName + ' ]的御空相关任务? 关闭后PC客户端该项目下所有用户将无法接收御空实时遥测等数据';
                self.projectYkaOperateForm.projectId = id;
                self.projectYkaOperateForm.ykAccessKey = ykAccessKey;
                self.projectYkaOperateForm.ykAccessSecret = ykAccessSecret;
              }
            },
          }, "御空关闭"));
        }
          break;
      }
      return createElement("div", {'class': 'r-n-c-c'}, [
        createElement('ButtonGroup', btnList),
      ])
    },
    selectPageList(currentPage = 1, size = -1) {
      let self = this;
      let form = {
        pageNum: currentPage,
        pageSize: size
      };
      self.isLoading = true;
      axios.get(self.url.project_list, {params: form}).then(function (response) {
        let {records} = response.data.content;
        self.dataList = records;
        self.isLoading = false;
      }).catch(function () {
        self.isLoading = false;
      });
    },
    selectDangerTypeList() {
      return axios.get(this.url.danger_type_list, {params: {pageNum: 1, pageSize: -1}});
    },
    selectPileCardTypeList() {
      return axios.get(this.url.pile_card_type_list, {params: {pageNum: 1, pageSize: -1}});
    },
    selectGeneralFacilitiesTypeList() {
      return axios.get(this.url.general_facilities_type_list, {params: {pageNum: 1, pageSize: -1}});
    },
    selectHighConsequenceAreaTypeList() {
      return axios.get(this.url.high_consequence_areas_type_list, {params: {pageNum: 1, pageSize: -1}});
    },
    selectConstructionTypeTypeList() {
      return axios.get(this.url.construction_type_list, {params: {pageNum: 1, pageSize: -1}});
    },
    selectCameraTypeTypeList() {
      return axios.get(this.url.camera_type_list, {params: {pageNum: 1, pageSize: -1}});
    },
    insertProject(projectForm) {
      let self = this;
      let form = Object.assign({}, projectForm);
      let logo = this.projectForm.clientLogo;
      if (logo !== null) {
        form.clientLogo = "/" + logo.substring(logo.indexOf(logo.split("/")[3]));
      }
      axios.post(self.url.project_insert, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList();
          self.$Message.success(message);
          Request.selectProjectList().then((projectRsp)=>{
            self.$store.state.projectList = projectRsp.data.content.records;
            for (let project of projectRsp.data.content.records) {
              self.$store.state.projectMap.set(project['id'],project['projectName']);
            }
            self.$store.state.isLogin = true;
          })
        } else {
          self.$Message.error(message);
        }
      });
    },
    updateProject(projectForm) {
      let self = this;
      let form = Object.assign({}, projectForm);
      let logo = this.projectForm.clientLogo;
      if (logo !== undefined && logo !== null){
        if (logo.startsWith("http")){
          form.clientLogo = form.newClientLogo;
        }
      }
      axios.patch(self.url.project_modify, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList();
          self.$Message.success(message);
          Request.selectProjectList().then((projectRsp)=>{
            self.$store.state.projectList = projectRsp.data.content.records;
            for (let project of projectRsp.data.content.records) {
              self.$store.state.projectMap.set(project['id'],project['projectName']);
            }
            self.$store.state.isLogin = true;
          })
        } else {
          self.$Message.error(message);
        }
      });
    },
    projectCpaAccessValidate(projectCpaOperateForm) {
      let self = this;
      let form = Object.assign({}, projectCpaOperateForm);
      axios.post(self.url.project_validate_cpa, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList();
          self.$Message.success(message)
        } else {
          self.$Message.error(message)
        }
        self.modalLoading = false;
        self.modalTip = false;
      });
    },
    projectCpaAccess(projectCpaOperateForm) {
      let self = this;
      let form = Object.assign({}, projectCpaOperateForm);
      axios.post(self.url.project_cpa_access, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList();
          self.$Notice.success({
            title: "云平台接入",
            desc: "项目[" + form.projectId + "]" + message,
            duration: 20
          })
        } else {
          self.$Notice.error({
            title: "云平台接入",
            desc: "项目[" + form.projectId + "]" + message,
            duration: 20
          })
        }
        self.modalLoading = false;
        self.modalTip = false;
      });
    },
    projectCpaOpen(projectCpaOperateForm) {
      let self = this;
      let form = Object.assign({}, projectCpaOperateForm);
      axios.post(self.url.project_cpa_start, form).then(function (response) {
        let {message} = response.data;
        self.selectPageList();
        self.$Notice.success({
          title: "云平台开启",
          desc: "项目[" + form.projectId + "]" + message,
          duration: 20
        })
        self.modalLoading = false;
        self.modalTip = false;
      }).catch(()=>{
        self.selectPageList();
        self.modalLoading = false;
        self.modalTip = false;
      });
    },
    projectCpaShutdown(projectCpaOperateForm) {
      let self = this;
      let form = Object.assign({}, projectCpaOperateForm);
      axios.post(self.url.project_cpa_shutdown, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList();
          self.$Notice.success({
            title: "云平台关闭",
            desc: "项目[" + form.projectId + "]" + message,
            duration: 20
          })
        } else {
          self.$Notice.error({
            title: "云平台关闭",
            desc: "项目[" + form.projectId + "]" + message,
            duration: 20
          })
        }
        self.modalLoading = false;
        self.modalTip = false;
      });
    },
    projectYkaAccessValidate(projectYkaOperateForm) {
      let self = this;
      let form = Object.assign({}, projectYkaOperateForm);
      axios.post(self.url.project_validate_yka, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList();
          self.$Message.success(message)
        } else {
          self.$Message.error(message)
        }
        self.modalLoading = false;
        self.modalTip = false;
      });
    },
    projectYkaAccess(projectYkaOperateForm) {
      let self = this;
      let form = Object.assign({}, projectYkaOperateForm);
      axios.post(self.url.project_yka_access, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList();
          self.$Notice.success({
            title: "御空接入",
            desc: "项目[" + form.projectId + "]" + message,
            duration: 20
          })
        } else {
          self.$Notice.error({
            title: "御空接入",
            desc: "项目[" + form.projectId + "]" + message,
            duration: 20
          })
        }
        self.modalLoading = false;
        self.modalTip = false;
      });
    },
    projectYkaOpen(projectYkaOperateForm) {
      let self = this;
      let form = Object.assign({}, projectYkaOperateForm);
      axios.post(self.url.project_yka_start, form).then(function (response) {
        let {message} = response.data;
        self.selectPageList();
        self.$Notice.success({
          title: "御空开启",
          desc: "项目[" + form.projectId + "]" + message,
          duration: 20
        })
        self.modalLoading = false;
        self.modalTip = false;
      }).catch(()=>{
        self.selectPageList();
        self.modalLoading = false;
        self.modalTip = false;
      });
    },
    projectYkaShutdown(projectYkaOperateForm) {
      let self = this;
      let form = Object.assign({}, projectYkaOperateForm);
      axios.post(self.url.project_yka_shutdown, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList();
          self.$Notice.success({
            title: "御空关闭",
            desc: "项目[" + form.projectId + "]" + message,
            duration: 20
          })
        } else {
          self.$Notice.error({
            title: "御空关闭",
            desc: "项目[" + form.projectId + "]" + message,
            duration: 20
          })
        }
        self.modalLoading = false;
        self.modalTip = false;
      });
    },
    projectInfrastructureTypeSelect(selectForm) {
      let self = this;
      let form = Object.assign({}, selectForm);
      axios.post(self.url.project_type_select, form).then(function (response) {
        let {message, state} = response.data;
        if (state === 200) {
          self.selectPageList();
          self.$Message.success(message);
        } else {
          self.$Message.error(state);
        }
        self.modalLoading = false;
        self.modalTip = false;
      });
    },
    cpBoxListGet(projectId){
      let self = this;
      axios.get(self.url.project_cp_box_list + projectId).then(function (response) {
        let records = response.data.content;
        self.cpBoxList = records;
        let onlineCount = 0;
        for (let record of records) {
          if (record.onLine === 1){
            onlineCount ++;
          }
        }
        self.modalTitle = "项目[ " + projectId + " ] 云盒   总数: "+ records.length +"   在线: "+ onlineCount
        self.isCpBoxModalShow = true;
        self.isLoading = false;
      }).catch(function () {
        self.isLoading = false;
      });
    }
  }
}
</script>

<style scoped>
#content {
  background: #FFFFFF;
  padding: 15px;
  overflow: auto;
}
.item-input {
  height: 60px;
}

.item-input-span {
  /*height: inherit;*/
  width: 120px;
}

.ivu-form-item-content {
  margin-left: 0 !important;
  position: relative;
  line-height: 32px;
  font-size: 14px;
}

.ivu-form-item {
  margin-bottom: 0;
  width: 100%;
}

.button-item {
  border: #19be6b 1px dashed;
  color: #19be6b;
}
</style>
